<template>
  <view class="content">
    <!-- 标题 -->
    <view class="tit">{{ detail.orderStatusStr }}</view>
    <view v-if="detail.orderStatus==1&&timestamp!=0" class="subtitle">剩余
      <u-count-down :show-days="false" :timestamp="timestamp" bg-color="#F5F5F5" color="#999999" font-size="26"
                    separator="zh" separator-color="#999999" separator-size="26"></u-count-down>
      自动关闭
    </view>
    <view v-if="detail.orderStatus==1&&timestamp==0" class="subtitle">
      订单已自动关闭
    </view>
    <view v-if="detail.orderStatus==2" class="subtitle">你已付款成功，请尽快到店使用</view>
    <!-- 订单详情 -->
    <view class="formBox basic-info">
      <view v-if="detail.orderStatus==2" class="code-text" @click="show=true">核销码</view>
      <view class="f-c-fs">
        <view class="label">订单编号：</view>
        <view class="value">{{ detail.washCarOrderNo }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">服务名称：</view>
        <view class="value">{{ detail.serviceName }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">使用方式：</view>
        <view class="value">{{ detail.useType }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">购买数量：</view>
        <view class="value">{{ detail.number }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">订单时间：</view>
        <view class="value">{{ detail.createOrderTime }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">支付状态：</view>
        <view class="value">{{ detail.payStatus == 1 ? '未支付' : '已支付' }}</view>
      </view>
      <view v-if="detail.payStatus == 2" class="f-c-fs">
        <view class="label">支付时间：</view>
        <view class="value">{{ detail.payTime }}</view>
      </view>
      <view v-if="detail.payStatus == 2" class="f-c-fs">
        <view class="label">支付方式：</view>
        <view class="value">{{ detail.payWay == 1 ? '微信' : '线下' }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">商品总额：</view>
        <view class="value">{{ detail.goodsAmount }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">优惠：</view>
        <view class="value">{{ detail.preferentialAmount }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">实付款：</view>
        <view class="value">{{ detail.amount }}</view>
      </view>
    </view>

    <!-- 发货门店 -->
    <view v-if="detail.storeDtoList" class="formBox store">
      <view class="tit">适用门店</view>
      <view v-for="(item,index) in detail.storeDtoList " class="list">
        <view class="name">{{ item.storeName }}</view>
        <view class="address">{{ item.address }}</view>
        <view class="f-c-sb">
          <view class="f-c-fs">
            <view class="item item-l">
              <view class="item-t">{{ item.distance }}KM</view>
              <view class="item-b">距离</view>
            </view>
            <!-- <view class="item item-l">
              <view class="item-t">3人</view>
              <view class="item-b">服务顾问</view>
            </view> -->
          </view>
          <view class="f-c-fe">
            <view class="item item-r" @click="tell(item.phone)">
              <image class="logo" mode="widthFix" :src="imagePath+'glxcx/phone.png'"></image>
            </view>
            <view class="item item-r" @click="goAddress(item.lon, item.lat)">
              <image class="logo-add" mode="widthFix"
                     :src="imagePath+'glxcx/address.png'"></image>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 活动截止日期 -->
    <view v-if="detail.orderStatus == 3" class="formBox basic-info">
      <view class="f-c-fs">
        <view class="label">使用时间：</view>
        <view class="value">{{ detail.useTime }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">使用门店：</view>
        <view class="value">{{ detail.orderStoreInfoVo.storeName }}</view>
      </view>
    </view>
    <view v-if="detail.orderStatus == 4" class="formBox basic-info">
      <view class="f-c-fs">
        <view class="label">退款时间：</view>
        <view class="value">{{ detail.refundTime }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">退款方式：</view>
        <view class="value">{{ detail.refundWay == 1 ? '线上' : '转账' }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">说明：</view>
        <view class="value">{{ detail.refundExplain }}</view>
      </view>
    </view>
    <view v-if="detail.orderStatus == 5" class="formBox basic-info">
      <view class="f-c-fs">
        <view class="label">取消时间：</view>
        <view class="value">{{ detail.cancelTime }}</view>
      </view>
      <view class="f-c-fs">
        <view class="label">说明：</view>
        <view class="value">{{ detail.cancelRemark }}</view>
      </view>
    </view>
    <u-modal v-model="show" title="核销码">
      <view class="slot-content f-c-c">
        <image :src="path" mode="" style="width: 200rpx;height: 200rpx;margin: 40rpx 0;"></image>
      </view>
    </u-modal>
    <l-painter
        css="width:200rpx;height:200rpx;"
        custom-style="position: fixed; left: 200%"
        isCanvasToTempFilePath
        @success="path = $event"
    >
      <l-painter-qrcode :text="detail.verificationCode" css="width: 200rpx; height: 200rpx"/>
    </l-painter>
  </view>
</template>

<script>
import {customerWashCarDetail} from '@/api/index';

export default {
  data() {
    return {
			imagePath:this.$imagePath,
      orderNo: '',
      detail: {},
      path: '',
      show: false,
      timestamp: 0
    };
  },
  onLoad(option) {
    this.orderNo = JSON.parse(option.param).orderNo;
    this.getDetail();
  },
  methods: {
    tell(phone) {
      uni.makePhoneCall({
        phoneNumber: phone //仅为示例
      });
    },
    goAddress(longitude, latitude) {
      uni.openLocation({
        latitude: Number(latitude),
        longitude: Number(longitude),
        success: function () {
          console.log('success');
        }
      });
    },
    getDetail() {
      var data = {
        orderNo: this.orderNo,
        lon: this.$get('location')[0],
        lat: this.$get('location')[1]
      };
      customerWashCarDetail(data).then(res => {
        this.detail = res.data;
        this.timestamp = (+new Date(this.detail.createOrderTime) + 1800000 - +new Date()) / 1000

      });
    }
  }
};
</script>

<style lang="less">
.content {
  padding: 20rpx 0;
  background: #f5f5f5;

  .tit {
    width: 702rpx;
    margin: auto;
    font-size: 32rpx;
    font-weight: bold;
    color: #177fff;
  }

  .subtitle {
    width: 702rpx;
    margin: auto;
    padding: 8rpx 0 10rpx;
    font-size: 26rpx;
    color: #999999;
  }

  .goods-info {
    padding: 26rpx 26rpx 18rpx;
    font-size: 26rpx;
    font-weight: bold;
    color: #333;

    .f-c-fs {
      padding-bottom: 12rpx;

      .tit {
        color: #333;
      }

      .name,
      .num {
        width: 50%;
      }

      .num {
        font-weight: 400;
      }
    }
  }

  .order-info {
    padding: 26rpx 26rpx 18rpx;
    font-size: 26rpx;
    font-weight: bold;

    .f-c-fs {
      padding-bottom: 12rpx;

      .name {
        width: 50%;
        color: #333333;
        padding: 0 0 12rpx;
      }

      .name-tit {
        font-size: 28rpx;
      }
    }
  }

  .store {
    border-radius: 18px;
    padding-left: 26rpx;
    padding-right: 26rpx;
    color: #333333;

    .tit {
      padding: 40rpx 0 0;
      font-size: 28rpx;
      font-weight: bold;
    }

    .list {
      border-bottom: 1px solid #ededed;
      padding: 20rpx 0;

      .name {
        font-size: 26rpx;
        font-weight: bold;
        margin-bottom: 16rpx;
      }

      .address {
        font-size: 24rpx;
        font-weight: bold;
        color: #999999;
        line-height: 35rpx;
      }

      .item-l {
        margin-right: 70rpx;
      }

      .item-r {
        margin-left: 70rpx;
      }

      .item {
        padding: 0;
        text-align: center;

        .item-t {
          font-size: 26rpx;
          font-weight: bold;
          color: #333333;
          line-height: 80rpx;
        }

        .item-b {
          font-size: 22rpx;
          font-weight: bold;
          color: #999999;
        }

        .logo {
          width: 28rpx;
        }

        .logo-add {
          width: 35rpx;
        }
      }
    }

    .list:last-child {
      border: none;
    }
  }

  .basic-info {
    border-radius: 18px;
    padding: 30rpx 26rpx 0;
    position: relative;

    .code-text {
      position: absolute;
      right: 26rpx;
      top: 26rpx;
      font-size: 28rpx;
      font-weight: bold;
      color: #177fff;
    }

    .value {
      font-weight: bold;
      font-size: 28rpx;
      flex: 1;
      text-align: left;
      padding-left: 20rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .label {
      font-size: 28rpx;
    }

    .f-c-fs {
      padding-bottom: 30rpx;
    }
  }
}
</style>
